<template>
  <div class="fp-card">
    <div
      v-if="title || collapse || $slots.title"
      class="fp-card__hd"
      :class="{
        'fp-card__hd--collapse': collapse,
        'fp-card__hd--btl': hasBottomLine
      }"
      @click="handleCollapse"
    >
      <span class="fp-card__hd-title">
        <slot name="title">
          {{ title }}
        </slot>
      </span>
      <span class="fp-card__hd-arr" v-if="!$slots.right && collapse">
        <i class="el-icon-arrow-up" v-if="isShow"></i>
        <i class="el-icon-arrow-down" v-else></i>
      </span>
      <span v-else class="fp-card__hd-slot">
        <slot name="right"></slot>
      </span>
    </div>
    <el-collapse-transition>
      <div
        class="fp-card__bd"
        :class="{ 'fp-card__bd--single': !title && !collapse && !$slots.right }"
        v-show="isShow"
      >
        <slot></slot>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    collapse: {
      type: Boolean,
      default: false
    },
    hasBottomLine: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    handleCollapse() {
      if (this.collapse && !this.$slots.right) {
        this.isShow = !this.isShow
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~assets/common.less';
.fp-card {
  .scrollbar;
  border-radius: 20px;
  padding: @m @m;
  background: @bg-color;
  &:hover {
    &::-webkit-scrollbar-thumb {
      display: block;
    }
  }
  .fp-card__hd {
    color: @c-label;
    display: flex;
    justify-content: space-between;
    padding-bottom: @m / 2;
    .fp-card__hd-title {
      font-size: 18px;
      line-height: 36px;
    }
    .fp-card__hd-arr {
      i {
        font-size: 22px;
      }
    }
    &.fp-card__hd--collapse {
      cursor: pointer;
      .fv-ts;
      &:hover {
        color: #333;
      }
    }
  }
  .fp-card__hd--btl {
    border-bottom: 1px solid @c-border;
  }
  .fp-card__bd {
    margin-top: @m / 2;
    &.fp-card__bd--single {
      margin-top: 0;
    }
  }
}
</style>
